import '../../../style/outSign.less';
import React, {Component} from 'react';
import {observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { RouteLayout, Reply, CKRichText } from 'weaver-mobile-page';
import { Tools, Icon, TextareaItem, RichEditor } from 'weaver-mobile';
const getLabel = Tools.getLabel;
const NoMask = Reply.NoMask;
const CKRichEditor = CKRichText.CKRichEditor;

@withRouter
@observer
export default class SignRouteLayout extends Component {
  constructor(props){
    super(props);
    this.state = {
      selection: 0
    }
  }

  componentDidMount(){
    this.init();
  }

  init = () => {
    const {store: {replyStore, clearReplyData}} = this.props;
    clearReplyData();
    replyStore.doClear();
  }

  focus = () => {
    const { selection } = this.state;
    this.props.store.replyStore.hidePanel();
    if (this.textEditor) {
      Promise.all([
        this.editorRef.editor.enable(true),
      ]).then(() => {
        this.editorRef.editor.setSelection({ index: selection, length: 0 });
      }).then(() => {
        this.editorRef.editor.focus();
      });
    }
  }

  setText = datas => {
    if (this.editorRef) {
      Promise.all([
        this.editorRef.editor.enable(false),
      ]).then(() => {
          this.editorRef.editor.insertText(this.state.selection, datas);
      }).then(() => {
        this.setState({ selection: this.state.selection + datas.length });
        this.editorRef.editor.setSelection({ index: this.state.selection, length: 0 });
      });
    }
  }

  onChangeSelection = (nextSelection) => {
    const {selection} = this.state;
    if (nextSelection !== null && nextSelection.index !== null && nextSelection.index !== selection) {
      this.setState({ selection: nextSelection.index });
    }
  }

  punchOutButton = () => {
    const {store } = this.props;
    const {currTime, currentPositionData, ckStore} = store;
    store.callOutSign({currTime, currentPositionData, text: ckStore.getData()}, () => this.props.history.go(-1))
  }

  render() {
    const {store} = this.props;
    const {currTime, currentPositionData, leftConfig, onSpeechChange, ckStore} = store;

    return (
        <RouteLayout>
            <div className='wm-route-layout'>
              <div className='outSignRouteLayout'>
                <div className='head'>{getLabel('82634','外勤签到')}</div>
                <div className='signInfo'>
                  <div>
                    <div className='icon'><Icon type='mail-timing-transmission' /></div>
                    <div className='lbl'>{getLabel('18949','打卡时间')}:</div>
                    <div className='val'>{currTime}</div>
                  </div>
                  <div>
                    <div className='icon'><Icon type='location' /></div>
                    <div className='lbl'>{getLabel('504544','打卡地点')}:</div>
                    <div className='val text-elli'>{currentPositionData.address || ''}</div>
                  </div>
                </div>
                <div className='signRemark'>
                  <div className="signRemark-text">
                    <div className="signRemark-text-container">
                      <CKRichEditor
                        placeholder={getLabel('504545','打卡备注')}
                        height={'100%'}
                        store={ckStore}
                      />
                    </div>
                  </div>
                  <NoMask
                      wrappedComponentRef={ref => this.replyRef = ref}
                      store={store.replyStore}
                      showInput={false}
                      visible={true}
                      leftConfig={leftConfig}
                      onSpeechChange={onSpeechChange}
                      onBrowserChange={(k, v) => store.setOtherParams(k, v)}
                      imgUploadConfig={{capture: 'watermarkCamera'}}
                    />
                </div>
                <div className='submitBar' onClick={this.punchOutButton}>{getLabel('725','提交')}</div>
              </div>
            </div>
        </RouteLayout>
    )
  }
}